<template>
  <div
    v-loading="fetchDataFlag"
    element-loading-background="rgba(80, 80, 80, 0.7)"
    class="view_wrap flex_column"
  >
    <!--日期选择-->
    <div class="block dateValueDay">
      <el-date-picker
        v-model="dateValue2"
        type="daterange"
        class="mydatepicker"
        format="yyyy-M-d"
        value-format="yyyy-M-d"
        align="right"
        unlink-panels
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="fetchData"
        @focus="showMask = true"
        @blur="showMask = false"
      />
    </div>
    <!--类型选择-->
    <div v-if="warning_select_auth" class="block">
      <el-radio-group v-model="radio" class="scene_tags" @change="fetchData">
        <div class="alltag">
          <el-radio label="全部">
            <span>全部类型</span>
          </el-radio>
          <svg-icon
            v-if="!showIssueMenu"
            slot="reference"
            class="more"
            icon-class="menu"
            @click="showTypeMenu"
          />
          <svg-icon
            v-else
            slot="reference"
            class="more"
            icon-class="menu_selected"
            @click="showIssueMenu = false"
          />
        </div>

        <el-radio
          v-for="(item, index) in scene_tags"
          :key="index"
          :label="item.scene_id"
          :title="getTagTitle(item)"
          >{{ item.scene }}({{ item.scene_num }})
        </el-radio>
      </el-radio-group>
    </div>
    <!--列表与详情wrap-->
    <div
      style="flex: 1; display: flex; flex-direction: column; overflow: hidden"
    >
      <div v-show="indexFlag === 0" class="box_header">
        <span class="container_title_list">预警列表</span>
        <svg-icon
          v-if="demo_flag === 1"
          class="demo_switch_selected"
          icon-class="xinxin2"
          @click="switchDemoFlag"
        />
        <svg-icon
          v-else
          class="demo_switch"
          icon-class="xinxin"
          @click="switchDemoFlag"
        />
        <div style="flex: 1" />
        <div class="order_class" @click="changeOrderType">
          <span>{{ !order_flag ? "默认排序" : "时间排序" }}</span>
          <svg-icon class="order_icon" icon-class="order_white" />
        </div>
        <el-select
          v-model="state_value"
          class="myselect"
          placeholder="请选择"
          @change="fetchData"
        >
          <el-option
            v-for="item in issueStatusList"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </div>
      <div
        v-if="list.length !== 0"
        v-show="indexFlag === 0"
        ref="issueList"
        class="list"
      >
        <div
          v-for="(item, index) in list"
          :key="index"
          class="card"
          :class="
            selectItem && selectItem.issue_id === item.issue_id
              ? 'selected-card'
              : ''
          "
          @click="setSelectedItem(item)"
        >
          <div class="imgbox">
            <el-image
              class="c_img"
              :src="
                item.photo_crop_url
                  ? urlAddToken(item.photo_crop_url)
                  : initThumb
              "
              fit="cover"
              @click="openIssue(item)"
            />
            <div class="bottom_tool">
              <div @click="displayIssue(item.issue_id, item, '1')">定位</div>
              <div>|</div>
              <div @click.stop="openIssue(item)">详情</div>
            </div>
          </div>
          <div class="content">
            <div class="c_header">
              <svg-icon
                v-if="item.if_case === 1"
                class="demo_switch_selected"
                icon-class="xinxin3"
              />

              <div class="c_name">
                {{ item.type }}
              </div>
              <div style="flex: 1" />
              <div class="c_state" :class="item.state | statusTypeFilter">
                <template>{{ item.stateName }}</template>
              </div>
            </div>
            <div class="c_body">
              <p>检测时间: {{ item.create_time }}</p>
              <p>
                巡检航线:
                {{ item.display_name ? item.display_name : item.airline }}
              </p>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.address"
                placement="top-start"
                :open-delay="800"
              >
                <p>地 点: {{ item.address }}</p>
              </el-tooltip>
            </div>
          </div>
        </div>

        <div v-if="fetchListFlag">加载中...</div>
      </div>
      <div v-else v-show="indexFlag === 0" style="margin-top: 20px">
        暂无数据
      </div>
      <!------------------------------------------------------------------------------------------------------------->
      <!--预警详情-->
      <div
        v-if="indexFlag === 1"
        class="box_header"
        style="justify-content: flex-start"
      >
        <svg-icon
          class="box_header_back_icon"
          icon-class="back"
          @click="showList"
        />
        <span class="container_title_detail" @click="showList">预警详情</span>
        <div style="flex: 1" />
        <div
          v-if="warning_set_typical_auth"
          class="flex_row"
          style="cursor: pointer"
          @click.stop="setItemAsDemo"
        >
          <span class="list_title_demo" style="font-size: 12px">{{
            selectItem.if_case === 1 ? "取消典型" : "设为典型"
          }}</span>
          <svg-icon
            v-if="selectItem.if_case === 1"
            class="demo_switch_selected"
            icon-class="xinxin2"
          />
          <svg-icon v-else class="demo_switch" icon-class="xinxin" />
        </div>
      </div>
      <div v-show="indexFlag === 1" class="issue_detail">
        <!-- 图片列表-->
        <div class="issue_img_list">
          <div v-for="(item, index) in selectItem.photos" :key="index">
            <div class="image_item_wrap">
              <el-image
                class="image"
                :class="[index === selectImgIndex ? 'img_selected' : '']"
                :src="
                  item.photoCropUrl ? urlAddToken(item.photoCropUrl) : initThumb
                "
                fit="cover"
                @click="selectImg(index, item)"
              />
              <div v-if="index === selectImgIndex" class="cover" />
              <svg-icon
                v-if="hiddenFunc"
                class="image_item_check_btn"
                icon-class="check-circle"
              />
              <svg-icon
                v-if="hiddenFunc"
                class="image_item_check_btn"
                icon-class="uncheck-circle"
              />
            </div>
          </div>
        </div>
        <!-- 事件信息：状态，事件，航线，地点-->
        <div class="issue_data">
          <div class="flex_row issue_title">
            <div class="issue_name">{{ selectItem.type }}</div>
            <div
              class="issue_state"
              :class="selectItem.state | statusNameFilter"
            >
              <template v-if="selectItem.state == '已失效'">已退回</template>
              <template v-else>{{ selectItem.state }}</template>
            </div>
          </div>
          <div class="item_detail_wrap">
            <p>检测时间：</p>
            <p>{{ selectItem.issue_time }}</p>
            <p>巡检航线：</p>
            <p>{{ selectItem.airline ? selectItem.airline : "" }}</p>
            <p style="text-align: justify">地 点：</p>
            <p>{{ selectItem.location }}</p>
          </div>
        </div>
        <div class="issue_flow">
          <div v-for="(item, index) in selectItemFlow" :key="index">
            <div class="item_flow">
              <div class="item_flow_type">
                <span class="type_style">{{ item.topic }} </span>
              </div>
              <div class="item_flow_people">{{ item.create_by }}</div>
              <div class="item_flow_time">{{ item.create_time }}</div>
              <div class="item_flow_content">{{ item.content }}</div>
              <div
                v-if="item.img_list && item.img_list.length > 0"
                class="item_flow_imgs"
              >
                <div v-for="(item, index) in item.img_list" :key="index">
                  <img
                    class="item_flow_img"
                    :src="item.img_url"
                    @click="viewImage(item)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--按钮操作 -->
        <div class="button_group_wrap flex_row">
          <!-- 是否显示取消  -->
          <el-button
            v-if="
              (selectItem.state === '新发现' && eventPermission === 0) ||
              (selectItem.state !== '已办结' &&
                [1, 2].includes(eventPermission))
            "
            class="cancel_text btn"
            @click="reportCancel"
            >取消
          </el-button>
          <!-- 是否显示忽略  -->
          <el-button
            v-if="selectItem.state === '新发现' && warning_ignore_event_auth"
            class="ignore_text btn"
            @click="ignoreIssue"
          >
            <span>{{ showIgnoreForm ? "提交" : "忽略" }}</span>
            <i
              v-if="!showIgnoreForm"
              class="el-icon-arrow-up"
              style="font-size: 20px; color: white; padding: 5px"
            />
          </el-button>
          <!-- 是否显示上报  -->
          <!-- <el-button
            v-if="
              false &&
              selectItem.state === '新发现' &&
              [0, 2].includes(eventPermission)
            "
            class="upload_text btn"
            :loading="isGettingChannel"
            @click="rquestChannel"
          >
            <span>{{ !showUploadForm ? "上报" : "提交" }}</span>
            <i
              class="el-icon-arrow-up"
              style="font-size: 20px; color: white; padding: 5px"
            />
          </el-button> -->
          <!-- 是否显示办结  -->
          <el-button
            v-if="
              (selectItem.state !== '已办结' && eventPermission === 1) ||
              (eventPermission === 2 &&
                !['新发现', '已办结'].includes(selectItem.state))
            "
            class="upload_text btn"
            @click="handleFinishEvent"
          >
            <span>{{ !showFinishForm ? "办结" : "提交" }}</span>
            <i
              class="el-icon-arrow-up"
              style="font-size: 20px; color: white; padding: 5px"
            />
          </el-button>
          <!-- 是否显示确定  -->
          <el-button
            v-if="
              ([1, 2].includes(eventPermission) &&
                selectItem.state === '已办结') ||
              (eventPermission === 0 && selectItem.state !== '新发现') ||
              eventPermission === 3
            "
            class="btn upload_text"
            @click="reportCancel"
          >
            确定
          </el-button>
        </div>
        <!-- 忽略操作弹窗-->
        <div v-if="showIgnoreForm" class="ignore_info_wrap">
          <div class="flex_row" style="margin-bottom: 10px">
            <el-select
              v-model="ignoreType"
              class="ignore_issue_name"
              placeholder="请选择忽略理由"
            >
              <el-option
                v-for="item in ignoreTypeList"
                :key="item.id"
                :label="item.reason"
                :value="item.id"
              />
            </el-select>
            <i
              class="el-icon-close"
              style="font-size: 20px; color: black; padding: 5px"
              @click.stop="showIgnoreForm = false"
            />
          </div>
          <el-input
            v-model="ignoreContent"
            type="textarea"
            :rows="6"
            placeholder="请选择填写备注说明"
            maxlength="150"
          />
        </div>
        <!-- 上报操作弹窗-->
        <div v-if="showUploadForm" class="update_info_wrap">
          <div class="flex_row" style="margin-bottom: 10px">
            <div class="update_issue_name" style="flex: 1">
              {{ uploadTitle }}
            </div>
            <i
              class="el-icon-close"
              style="font-size: 20px; color: black; padding: 5px"
              @click.stop="showUploadForm = false"
            />
          </div>
          <el-input
            v-model="uploadContent"
            type="textarea"
            :rows="6"
            placeholder="请输入上报内容"
            maxlength="150"
          />
        </div>
        <!-- 办结 -->
        <div v-if="showFinishForm" class="update_info_wrap">
          <div class="flex_row" style="margin-bottom: 10px">
            <div class="update_issue_name" style="flex: 1">
              {{ uploadTitle }}
            </div>
            <i
              class="el-icon-close"
              style="font-size: 20px; color: black; padding: 5px"
              @click.stop="showFinishForm = false"
            />
          </div>
          <el-input
            v-model="uploadContent"
            type="textarea"
            :rows="6"
            placeholder="请输入上报内容"
            maxlength="150"
          />
          <el-upload
            class="upload-photo"
            action="https://flyseebeta.guihuao.com/beta/image/v1/upload/complete_image"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :file-list="fileList"
          >
            <el-button size="small" type="primary" class="upload-btn"
              >点击上传
            </el-button>
          </el-upload>
        </div>
      </div>
    </div>
    <!--问题图片查看组件-->
    <move-box
      ref="moveBox4"
      box-right="400"
      box-top="170"
      :box-issue="true"
      :box-scale="true"
      :box-share="!warning_share_event_auth"
      @closePhoto="closePhoto"
    >
      <issue-viewer
        canvas-name="canvas4"
        v-if="showIssueViewer"
        :points2="selectItemPoints || selectItem.photos[selectImgIndex].points"
        :url2="selectItemImg || selectItem.photos[selectImgIndex].photoOssUrl"
        :mark-pic-obj2="markPicObj"
        :select-item="selectItem.photos[selectImgIndex]"
        :select-item-mark-id="selectItemMarkId"
        style="height: 100%; width: 100%; position: relative"
      />
    </move-box>

    <!--流转图片查看组件-->
    <move-box
      ref="moveBox_flowImg"
      :box-top="300"
      :box-right="500"
      :box-width="700"
      :box-height="510"
      style="z-index: 2"
      :box-share="true"
    >
      <!--图片展示-->
      <div class="container">
        <!--图片内容-->
        <img-box ref="imgBox" :canvas-width="700" :canvas-height="510" />
      </div>
    </move-box>

    <!--选择上报平台-->
    <!-- <el-dialog
      class="report_dialog"
      title="请选择上报平台"
      :append-to-body="true"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
    >
      <el-radio-group
        v-model="radioPlatform"
        text-color="#0000ff"
        size="medium"
        style="
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        "
        @change="selectPlatform"
      >
        <div v-for="(item, index) in platformList" :key="index">
          <el-radio class="radio" :label="item.channelId" size="medium">
            {{ item.channelName }}
          </el-radio>
        </div>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reportDialogCancel">取 消</el-button>
        <el-button type="primary" @click="reportDialogIssue">确 定</el-button>
      </span>
    </el-dialog> -->

    <div v-if="showMask" class="full-mask" @click="showMask = false" />
    <issue-type-card
      v-show="showIssueMenu"
      :type-list="scenesTypeList"
      class="issue_type_card"
      @closeIssueMenu="closeIssueMenu"
    />
    <div v-show="isShowAngleView">
      <div
        v-show="isShowIssueInfotips"
        ref="issueInfotips"
        class="issueInfotips"
      >
        <div v-if="currentIssueInfotips" class="issueInfotipsBox">
          <div class="issue_title">
            {{ currentIssueInfotips.type }}
          </div>
          <div class="issue_time">
            检测时间:{{ currentIssueInfotips.create_time }}
          </div>
          <div class="issue_location">
            地点:{{ currentIssueInfotips.address }}
          </div>
          <div class="arrowpoint" />
          <!-- <div class="closeissueInfotipsBox" @click="isShowIssueInfotips = false"> -->
          <div class="closeissueInfotipsBox" @click="closeIssueInfotips">
            <i class="el-icon-close" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getIssueDetail,
  getScenes,
  getselfIssues,
  getIssueRadios,
  completeEvent,
} from "@/api/kanban";

import {
  getSceneType,
  requestIgnoreOptions,
  getIssueList,
  getIssueDetail2,
  setCase,
  setIgnore,
  getIssueLog,
  getIssuePos,
} from "@/api/view4Api";

import IssueViewer from "@/views/components/tab-views/baseComps/IssueViewer";
import MoveBox from "@/views/components/boxComps/moveBox";
import store from "@/store";
import IssueTypeCard from "@/views/components/tab-views/view4Comps/IssueTypeCard";
import axios from "axios";
import ImgBox from "@/views/components/boxComps/imgBox";
import { getTimeString } from "@/utils/formatTime";
import { getToken } from "@/utils/auth.js";
import { addUrlToken } from "@/utils/allTool.js";

var curMark = null;
var newclickPos = null;
var IconScaleLayer = null;
var firstLoad = false;
export default {
  components: { ImgBox, IssueTypeCard, MoveBox, IssueViewer },
  filters: {
    textFilter(name) {
      return name.split("-")[2];
    },
    statusTextFilter(status) {
      const statusTextMap = {
        10: "上报",
        20: "受理",
        30: "办理",
        32: "分拨",
        36: "回退",
        37: "协同审核",
        38: "协同反馈",
        39: "督办",
        40: "结案",
        50: "反馈",
        1: "办理",
        8: "新增",
        61: "受理",
        63: "自动签收",
        21: "转交",
        31: "结案",
        66: "转为无效事件",
      };
      return statusTextMap[status];
    },
    statusTypeFilter(type) {
      const typeStr = type.toString();
      if (typeStr === "0") {
        return "red";
      } else if (typeStr === "10") {
        return "green";
      } else if (typeStr === "12") {
        return "blue";
      } else if (typeStr === "15") {
        return "orange";
      } else {
        return "gray";
      }
    },
    statusNameFilter(name) {
      if (name === "新发现") {
        return "red";
      } else if (name === "已上报") {
        return "green";
      } else if (name === "已受理") {
        return "blue";
      } else if (name === "已办结") {
        return "orange";
      } else {
        return "gray";
      }
    },
  },

  computed: {
    // 权限
    // 预警信息 筛选
    warning_select_auth() {
      return this.userAuthor?.warning?.select?.have_auth;
    },
    // 预警信息 设置典型
    warning_set_typical_auth() {
      return this.userAuthor?.warning?.set_typical?.have_auth;
    },
    // 预警信息 忽略事件
    warning_ignore_event_auth() {
      return this.userAuthor?.warning?.ignore_event?.have_auth;
    },
    // 预警信息 事件上报
    warning_share_event_auth() {
      return this.userAuthor?.warning?.share_event?.have_auth;
    },
    // 预警信息 筛选
    warning_select_auth() {
      return this.userAuthor?.warning?.select?.have_auth;
    },

    /**
     *   0 只有上报权限
     *   1 只有办结权限 / 有办结和上报权限，无配置推送平台
     *   2 有办结和上报权限，有配置推送平台
     */
    eventPermission() {
      const canUpload = this.userAuthor?.warning?.push_event?.have_auth;
      const canFinish = true || this.userAuthor?.warning?.complete?.have_auth;
      console.log("eventPermission canUpload", canUpload);
      console.log("eventPermission canFinish", canFinish);
      // const canIgnore =  this.warning_ignore_event_auth
      if (canUpload && !canFinish) {
        return 0;
      } else if (!canUpload && canFinish) {
        return 1;
      } else if (canUpload && canFinish && this.hasPlatform) {
        return 2;
      } else if (canUpload && canFinish && !this.hasPlatform) {
        return 1;
      } else {
        return 3;
      }
    },
  },

  props: {
    dateValue: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      token: getToken(),
      dateValue2: this.dateValue,
      fetchListFlag: false, // 加载类表，用于分页加载
      fetchDataFlag: false, // 加载选项和列表，用于选项变更
      indexFlag: 0,
      issueDetail: "",
      issueTitle: "",
      hiddenFunc: false, // 隐藏部分功能
      selectImgIndex: -1, // 功能占不使用
      selectItem: "",
      selectItemImg: "",
      selectItemPoints: "",
      showIssueViewer: false,
      // isGettingChannel: false,
      isReportingIssue: false,
      // dialogTableVisible: false,
      // radioPlatform: "",
      // platformList: [],
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
      //
      isMajor: false,
      isUrgent: false,
      //
      value1: null,
      value2: null,
      colors: ["#99A9BF", "#F7BA2A", "#ff5500"], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      assetsTipImage: [],
      removeListener: null,
      scenes: {},

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        // disabledDate(time) {
        //   let curDate = new Date().getTime()
        //   let three = 90 * 24 * 3600 * 1000
        //   let threeMonths = curDate - three
        //   var thatDay = time.getTime()
        //   return time.getTime() > Date.now() || time.getTime() < threeMonths
        // },
      },

      // 问题列表
      list: [],
      scene_tags: [],

      radio: "全部",
      state_value: "",
      state_options: [
        "全部",
        "新发现",
        "已上报",
        "已分流",
        "已受理",
        "已办结",
        "已退回",
        // '已删除'
      ],

      page: 1,
      page_size: 20,
      total_pages: 1,

      morelistShow: false,
      initThumb: require("@/assets/404_images/not_found.png"),

      //
      showMask: false,
      isShowIssueInfotips: false,
      currentIssueInfotips: "",
      markPicObj: {
        markPositionLatitude: "",
        markPositionLongitude: "",
        photo_id: "",
        photo_time: "",
        sceneName: "",
      },
      selectItemMarkId: "",
      allIssuesList: [],
      isShowAngleView: true,
      alwaysShowEllipse: false,
      // ------------------------
      showIssueMenu: false,
      demo_flag: 0, // 1 查找典型案例， 0 不需要查找
      order_flag: false,
      selectItemFlow: "",
      scenesTypeList: [],
      issueStatusList: [],
      // 上报信息
      showUploadForm: false,
      showFinishForm: false,
      uploadTitle: "",
      uploadContent: "",
      // 忽略信息
      showIgnoreForm: false,
      ignoreType: "",
      ignoreTypeList: [],
      ignoreContent: "",

      userAuthor: null,
      //
      deptId: "",
      userId: "",
      //
      fileList: [],
      hasPlatform: null,
    };
  },
  watch: {
    newDate(newVal, oldVal) {
      if (newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1]) {
        this.$bus.emit("changeDateValue", newVal);
      }
    },
    indexFlag(val) {
      if (!val) {
        this.showIssueViewer = false;
        if (IconScaleLayer) {
          CesiumUtil.LayerRemoveAll(IconScaleLayer);
        }
      }
    },
    showIssueViewer(val) {
      this.$refs.moveBox4.toggleShow(val);
    },
  },
  created() {
    this.userAuthor = this.$store.getters.userAuth;
    var _this = this;

    for (let i = 0; i < 6; i++) {
      const img = new Image();
      img.src = require("@/assets/clusterEnty/radar" + i + ".png");
      img.onload = function () {
        _this.assetsTipImage[i] = img;
        console.log("before:" + img);
      };
    }
    _this.$bus.on("etlines", (item) => {
      console.log(item);

      _this.selectItemImg = item.item.photo_url;
      var point = item.points;
      _this.selectItemPoints = point;
    });
    _this.$bus.on("setIssueId", (info) => {
      _this.showDetail22(info.code, info);
    });
    _this.$bus.on("setIssueIdMark", (info) => {
      _this.showDetail33(info.code, info);
    });
    _this.$bus.on("closeIconScaleLayer", (info) => {
      if (IconScaleLayer) {
        CesiumUtil.LayerRemoveAll(IconScaleLayer);
      }
    });
  },
  mounted() {
    var this_ = this;
    this_.dateValue2 = this_.dateValue;
    var is_loading = this.$store.getters.is_map_loading;
    // 显示指点飞行按钮
    this_.$bus.emit("bottomButtonState", 1);
    this.deptId = store.getters.deptId;
    this.userId = store.getters.userId;
    this.initMenuData();

    if (!is_loading) {
      console.log("页面新加载");
      this.getScenesData();
      setTimeout(function () {
        this_.fetchData();
        this_.$store.commit("room/set_map_loading", true);
      }, 1000);
    } else {
      console.log("页面刷新");
      this.scenes = this.$store.getters.scenes;
      this.fetchData();
    }
    this.initMap();
  },
  updated() {
    if (this.$refs.issueList) {
      this.$refs.issueList.addEventListener("scroll", this.lazyLoading);
    }
  },
  beforeDestroy() {
    if (viewer) {
      viewer.scene.primitives.remove(billboardsCollection);
      viewer.scene.primitives.remove(labelCollection);
      viewer.scene.primitives.remove(myPrimitive);
    }

    this.removeListener = undefined;
    if (IconScaleLayer) {
      CesiumUtil.LayerRemoveAll(IconScaleLayer);
      IconScaleLayer = null;
    }

    QuestionLayer.entities.removeAll();
  },
  methods: {
    urlAddToken(url) {
      return addUrlToken(url);
    },
    downloadTest() {
      const _this = this;
      axios({
        method: "POST",
        url: "http://192.168.10.51:5002/v1/download/photo",
        data: {
          flight_record_code: "7c36d8fa-1d54-4812-bb37-86326039ee44",
        },
        responseType: "blob",
      })
        .then((response) => {
          console.log("testtest11", response);

          const blob = new Blob([response.data], { type: "application/zip" });
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement("a"); // 创建a标签
          link.href = url;
          link.download = "下载图片"; // 重命名文件
          link.click();
          URL.revokeObjectURL(url); // 释放内存
        })
        .catch((error) => _this.$errorMsg(error));
    },

    initMap() {
      if (!issueCollection) {
        issueCollection = CesiumUtil.CreateLayer("issueCollection");
        issueCollection.show = false;
      }
      issueCollection.entities.removeAll();
    },
    closeIssueInfotips() {
      this.isShowIssueInfotips = false;
      if (IconScaleLayer) {
        CesiumUtil.LayerRemoveAll(IconScaleLayer);
      }
    },
    displayIssue(code, item, num) {
      var _this = this;
      var billboards = billboardsCollection._billboards;
      console.log("displayIssue4", billboards);
      for (var i = 0; i < billboards.length; i++) {
        var c = "issue_" + code;
        if (billboards[i]["_id"] == c) {
          console.log(billboards[i]);
          if (curMark) {
            curMark.scale = 0.8;
            billboards[i].color = new Cesium.Color.fromBytes(
              220,
              220,
              220,
              220
            );
          }

          billboards[i].color = new Cesium.Color.fromBytes(255, 255, 255, 255);
          curMark = billboards[i];
          var cartographic = Cesium.Cartographic.fromCartesian(
            billboards[i]._position
          );

          var currentClickLon = Cesium.Math.toDegrees(cartographic.longitude);
          var currentClickLat = Cesium.Math.toDegrees(cartographic.latitude);
          console.log(currentClickLon, currentClickLat, cartographic.height);
          CesiumUtil.FlyToElementByGPS({
            longitude: currentClickLon,
            latitude: currentClickLat,
            height: cartographic.height + 2,
            distance: 900,
            leftview: !num,
          });

          _this.markPicObj.markPositionLatitude = currentClickLat;
          _this.markPicObj.markPositionLongitude = currentClickLon;
          // 这里是预警列表定位出现icon气泡信息
          _this.isShowIssueInfotips = false;
          if (!IconScaleLayer) {
            IconScaleLayer = CesiumUtil.CreateLayer("IconScaleLayer");
          } else {
            CesiumUtil.LayerRemoveAll(IconScaleLayer);
          }

          var mark = {
            id: billboards[i]["_id"],
            name: "",
            type: "issue",
            longitude: currentClickLon,
            latitude: currentClickLat,
            height: cartographic.height,
            scale: 1.3,
            pixelOffset: [0.0, -10.0],
            icon: billboards[i]["_imageId"],
          };
          CesiumUtil.AddMark2(mark, IconScaleLayer);
          if (item) {
            var htmlOverlay2 = this.$refs.issueInfotips;
            newclickPos = Cesium.Cartesian3.fromDegrees(
              currentClickLon,
              currentClickLat,
              cartographic.height + 2
            );
            var scratch = new Cesium.Cartesian2();

            _this.currentIssueInfotips = item;
            setTimeout(function () {
              _this.isShowIssueInfotips = true;
              viewer.scene.preRender.addEventListener(function () {
                var position = newclickPos;
                if (
                  viewer.scene.globe.ellipsoid.cartesianToCartographic(
                    viewer.camera.position
                  ).height > 5000
                ) {
                  if (_this.isShowAngleView) {
                    _this.isShowAngleView = false;
                  }
                } else {
                  _this.isShowAngleView = true;
                }

                if (position) {
                  var canvasPosition =
                    viewer.scene.cartesianToCanvasCoordinates(
                      position,
                      scratch
                    );
                  if (Cesium.defined(canvasPosition)) {
                    htmlOverlay2.style.top = canvasPosition.y - 190 + "px";
                    htmlOverlay2.style.left = canvasPosition.x - 160 + "px";
                  }
                }
              });
            }, 1000);
          }
        }
      }
    },
    flyToIssue(position) {
      const carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);
      const lon = Cesium.Math.toDegrees(carto.longitude);
      const lat = Cesium.Math.toDegrees(carto.latitude);
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(lon, lat, 2000.0),
      });
    },
    showDetail(item) {
      this.showIgnoreForm = false;
      this.showUploadForm = false;
      this.showFinishForm = false;
      this.selectItem = item;
      this.fileList = [];
      this.indexFlag = 1;

      this.selectImgIndex = -1;
      //
      this.ignoreContent = "";
      this.ignoreType = "";
      this.uploadContent = "";
      this.uploadTitle = "";
      this.requestIssueInfo();
      this.markPicObj.sceneName = item.type;
      this.markPicObj.photo_time = item.create_time;
    },
    showDetail22(issueId, info) {
      var _this = this;
      if (issueId) {
        var proList = _this.allIssuesList;

        var cartographic = Cesium.Cartographic.fromCartesian(info.position);

        var currentClickLon = Cesium.Math.toDegrees(cartographic.longitude);
        var currentClickLat = Cesium.Math.toDegrees(cartographic.latitude);
        console.log(currentClickLon, currentClickLat, cartographic.height);
        if (!IconScaleLayer) {
          IconScaleLayer = CesiumUtil.CreateLayer("IconScaleLayer");
        } else {
          CesiumUtil.LayerRemoveAll(IconScaleLayer);
        }
        var mark = {
          id: info.id,
          name: "",
          type: "issue",
          longitude: currentClickLon,
          latitude: currentClickLat,
          height: cartographic.height,
          scale: 1.2,
          pixelOffset: [0.0, -10.0],
          icon: info.imageId,
        };
        setTimeout(function () {
          CesiumUtil.AddMark2(mark, IconScaleLayer);
          CesiumUtil.FlyToElementByGPS({
            longitude: currentClickLon,
            latitude: currentClickLat,
            height: cartographic.height + 2,
            distance: 900,
            leftview: true,
          });
        }, 10);

        proList.forEach((item, index) => {
          if (item.issue_code == issueId) {
            console.log(item);
            _this.showIssueViewer = false;
            _this.selectItem = "";
            _this.selectItemImg = "";
            _this.indexFlag = 1;
            _this.markPicObj.markPositionLatitude = item.location[2];
            _this.markPicObj.markPositionLongitude = item.location[1];
            _this.selectImgIndex = -1;

            getIssueDetail({ problemCode: issueId.toString() }).then(
              (response) => {
                console.log(response);
                _this.selectItem = response.data;
                _this.selectItem.create_time = response.data.issue_time;
                _this.selectItemImg = response.data.photos[0].photoOssUrl;
                _this.selectItemPoints = response.data.photos[0].points;
                _this.selectItemMarkId =
                  response.data.photos[0].photo_id.toString();
                this.markPicObj.photo_id =
                  response.data.photos[0].photo_id.toString();
                _this.markPicObj.photo_time = response.data.issue_time;
                _this.markPicObj.sceneName = response.data.type;
                _this.$forceUpdate();
                _this.showIssueViewer = true;
                //
                _this.uploadTitle = response.data.issue_name;
                _this.uploadContent = response.data.uploadContent
                  ? response.data.uploadContent
                  : "在(" +
                    response.data.location +
                    ")发现 【" +
                    response.data.issue_name +
                    "】 " +
                    response.data.issue_time;
              }
            );
          }
        });
        //
        _this.requestIssueFlowById(issueId);
      }
    },
    showDetail33(issueId, info) {
      var _this = this;
      if (issueId) {
        var proList = _this.allIssuesList;

        var cartographic = Cesium.Cartographic.fromCartesian(info.position);
        var currentClickLon = Cesium.Math.toDegrees(cartographic.longitude);
        var currentClickLat = Cesium.Math.toDegrees(cartographic.latitude);
        console.log(currentClickLon, currentClickLat, cartographic.height);
        setTimeout(function () {
          CesiumUtil.FlyToElementByGPS({
            longitude: currentClickLon,
            latitude: currentClickLat,
            height: cartographic.height + 2,
            distance: 900,
            leftview: true,
          });
        }, 10);
        if (_this.showIssueViewer == true) {
          return false;
        }
        proList.forEach((item, index) => {
          if (item.issue_code == issueId) {
            console.log(item);
            _this.showIssueViewer = false;
            _this.selectItem = "";
            _this.selectItemImg = "";
            _this.indexFlag = 1;
            _this.markPicObj.markPositionLatitude = item.location[2];
            _this.markPicObj.markPositionLongitude = item.location[1];
            _this.selectImgIndex = -1;

            getIssueDetail({ problemCode: issueId.toString() }).then(
              (response) => {
                console.log(response);
                _this.selectItem = response.data;
                _this.selectItem.create_time = response.data.issue_time;
                _this.selectItemImg = response.data.photos[0].photoOssUrl;
                _this.selectItemPoints = response.data.photos[0].points;
                _this.selectItemMarkId =
                  response.data.photos[0].photo_id.toString();
                this.markPicObj.photo_id =
                  response.data.photos[0].photo_id.toString();
                _this.markPicObj.photo_time = response.data.issue_time;
                _this.markPicObj.sceneName = response.data.type;
                _this.$forceUpdate();
                _this.showIssueViewer = true;
                //
                console.log("debug09211111", response.data);
                _this.uploadTitle = response.data.issue_name;
                _this.uploadContent = response.data.uploadContent
                  ? response.data.uploadContent
                  : "在(" +
                    response.data.location +
                    ")发现 【" +
                    response.data.issue_name +
                    "】 " +
                    response.data.issue_time;
              }
            );
          }
        });
        //
        _this.requestIssueFlowById(issueId);
      }
    },
    requestIssueInfo() {
      //
      var _this = this;
      getIssueDetail2({ issue_id: _this.selectItem.issue_id }).then(
        (response) => {
          if (response.msg === "ok") {
            this.selectItem = response.data;
            this.selectItem.title = response.data.issue_name; // ?
            this.selectItem.photos = response.data.photos; // ?
            _this.selectItemMarkId =
              response.data.photos[0].photo_id.toString();
            this.markPicObj.photo_id =
              response.data.photos[0].photo_id.toString();
            //
            this.uploadTitle = this.selectItem.issue_name;
            this.uploadContent = this.uploadContent
              ? this.uploadContent
              : "在(" +
                this.selectItem.location +
                ")发现 【" +
                this.selectItem.issue_name +
                "】 " +
                this.selectItem.issue_time;
            _this.$forceUpdate();
            //
            this.selectImg(0, this.selectItem.photos[0]);
          }
        }
      );

      _this.$bus.emit("setSelectItemissueId", _this.selectItem.issue_id);
      _this.requestIssueFlowById(_this.selectItem.issue_id);
    },
    //
    requestIssueFlowById(issueId) {
      getIssueLog({ problem_code: issueId.toString() })
        .then((res) => {
          if (res.msg === "ok") {
            this.selectItemFlow = res.data;
          }
          this.$forceUpdate();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //
    setSelectedItem(item) {
      if (this.selectItem && this.selectItem.issue_id === item.issue_id) {
        this.selectItem = {};
        return;
      }
      this.selectItem = item;
    },
    openIssue(item) {
      this.displayIssue(item.issue_id);
      var that = this;
      setTimeout(function () {
        that.showDetail(item);
      }, 500);
    },

    fetchData(flag) {
      this.morelistShow = false;
      // flag 用于判断是否是时间参数改变 只有时间参数改变需要更新类型列表部分

      viewer.scene.primitives.remove(billboardsCollection);
      viewer.scene.primitives.remove(labelCollection);
      viewer.scene.primitives.remove(myPrimitive);
      this.removeListener = undefined;
      QuestionLayer.entities.removeAll();
      this.fetchDataFlag = true;

      this.page = 1;
      this.closeIssueInfotips();

      if (this.scene_tags.length > 0) {
        this.updateIssueNum();
      } else {
        this.getScenesType();
      }
    },
    getIssuePosition() {
      const _this = this;
      var newStateValue = "";
      var newRadio = "";
      if (_this.issueStatusList instanceof Array) {
        _this.issueStatusList.forEach((item, index) => {
          if (item.key == _this.state_value) {
            newStateValue = item.value;
          }
        });
      }
      if (_this.scene_tags instanceof Array) {
        if (this.radio === "全部") {
          this.scene_tags.forEach((item) => {
            if (item.scene_num > 0) {
              newRadio = newRadio + item.scene_name + ",";
            }
          });
        } else if (this.radio) {
          _this.scene_tags.forEach((item, index) => {
            if (item.scene_id === this.radio && item.scene_num > 0) {
              newRadio = item.scene_name;
            }
          });
        } else {
          this.$message("请选择问题类型");
        }
      }
      getIssuePos({
        begin_date: this.dateValue2[0],
        end_date: this.dateValue2[1],
        issue_state: this.state_value === "" ? "" : newStateValue,
        issue_type: newRadio,
        depart_id: this.deptId,
        user_id: this.userId,
      })
        .then((res) => {
          myPrimitive = null;
          var issues = res.data;
          this.allIssuesList = res.data;
          if (issues) {
            this.$emit("getIssuesList", issues);
            this.buildCluster1(issues);
            this.buildCluster3(issues);
            if (!firstLoad) {
              this.$nextTick(() => {
                const option = this.$store.getters.kanBanConfig?.option || [];

                const clusterIssue = option.find((feature) => {
                  return feature.feature === "cluster_issue";
                });
                const show1 = clusterIssue ? !!clusterIssue.isSelect : false;
                QuestionLayer.show = show1;

                const positionIssue = option.find((feature) => {
                  return feature.feature === "position_issue";
                });
                const show2 = positionIssue ? !!positionIssue.isSelect : false;
                this.$bus.emit("toggleIssueLayer", show2);
              });
              firstLoad = true;
            }
          }
        })
        .finally(() => {
          this.$bus.emit("CloseLoading", "");
          this.fetchDataFlag = false;
        });
    },
    getScenesData() {
      var that = this;
      getScenes({
        page: 1,
        limit: 300,
      }).then((res) => {
        var scenes = res.data.items;
        scenes.forEach(function (item) {
          that.scenes[item["scene_id"].toString()] = {
            icon_url: item["icon_url"],
            scene_name: item["scene_name"],
          };
        });
        that.$store.commit("room/set_scenes", that.scenes);
      });
    },
    // 绘制问题
    buildCluster1(res) {
      billboardsCollection = viewer.scene.primitives.add(
        new Cesium.BillboardCollection({
          scene: viewer.scene,
        })
      );
      myPrimitive = viewer.scene.primitives.add(
        new Cesium.PrimitiveCollection()
      );
      labelCollection = viewer.scene.primitives.add(
        new Cesium.LabelCollection({
          scene: viewer.scene,
        })
      );
      var that = this;
      res.forEach(function (item) {
        var sceneItem = that.scenes[item["scene"].toString()];

        /***/
        if (sceneItem) {
          var lon = item["location"][1];
          var lat = item["location"][2];
          var hei = item["location"][0];
          var icon = sceneItem["icon_url"]
            ? sceneItem["icon_url"]
            : "http://fsimage.guihuao.com/mark_tag_icon/vubwzv4d41.png";
          var name = sceneItem["scene_name"]
            ? sceneItem["scene_name"]
            : "未命名";

          billboardsCollection.add({
            id: "issue_" + item["issue_code"],
            position: Cesium.Cartesian3.fromDegrees(lon, lat, hei),
            scale: 0.8,
            color: new Cesium.Color.fromBytes(220, 220, 220, 220),
            disableDepthTestDistance: 99000000,
            // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            scaleByDistance: new Cesium.NearFarScalar(500, 1.0, 2000, 0.7),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              10.0,
              8000.0
            ),
            image: icon, // 图片存储路径,
            type: "issue",
            width: 38,
            height: 42,
          });
          labelCollection.add({
            id: "issue_" + item["issue_code"],
            // font : `bold 12px sans-serif`,
            position: Cesium.Cartesian3.fromDegrees(lon, lat, hei),
            text: name,
            font: "normal 20px MicroSoft YaHei",
            fillColor: new Cesium.Color.fromBytes(0, 0, 0, 255),
            backgroundColor: new Cesium.Color.fromBytes(255, 255, 255, 200),
            showBackground: true,
            scale: 0.8,
            backgroundPadding: new Cesium.Cartesian2(9, 7),
            outlineWidth: 0,
            pixelOffset: new Cesium.Cartesian2(25.0, -6.0),
            pixelOffsetScaleByDistance: new Cesium.NearFarScalar(
              100,
              1.0,
              2000,
              0.6
            ),
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scaleByDistance: new Cesium.NearFarScalar(500, 1.0, 2000, 0.6),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              10.0,
              1000.0
            ),
          });
        }
      });
      that.$bus.emit("CloseLoading", "");
    },
    // 绘制聚类
    buildCluster3(issues) {
      var arr = [];
      issues.forEach(function (item) {
        if (item["location"].length == 2) {
          var lon = item["location"][0];
          var lat = item["location"][1];
        } else if (item["location"].length == 3) {
          var lon = item["location"][1];
          var lat = item["location"][2];
        }
        var point = turf.point([lon, lat]);
        if (lon && lat) {
          arr.push(point);
        }
      });
      var collection = turf.featureCollection(arr);
      var maxDistance = 0.5;
      var clustered = turf.clustersDbscan(collection, maxDistance);

      var that = this;
      turf.clusterEach(clustered, "cluster", function (cluster, clusterValue) {
        var features = cluster.features;
        var center = turf.center(cluster);

        var max = 0;
        for (var i = 0; i < features.length; i++) {
          var from = features[i];
          var to = center;
          var options = { units: "kilometers" };

          var distance = turf.distance(from, to, options);

          if (distance > max) {
            max = distance;
          }
        }
        var center_lon = center["geometry"]["coordinates"][0];
        var center_lat = center["geometry"]["coordinates"][1];
        var radiu = max * 1000;
        var num = features.length;
        var str = "问题" + num + "个";
        const ellipseCondition =
          that.radio !== "全部"
            ? new Cesium.DistanceDisplayCondition(600.0, 20000000.0)
            : new Cesium.DistanceDisplayCondition(600.0, 80000.0);

        QuestionLayer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(center_lon, center_lat, 1),
          label: {
            text: str,
            font: "normal 20px MicroSoft YaHei",
            fillColor: new Cesium.Color.fromBytes(255, 255, 255, 255),
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            scaleByDistance: new Cesium.NearFarScalar(2000, 1.0, 15000, 0.6),
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
              2000.0,
              50000.0
            ),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          },
          ellipse: {
            semiMinorAxis: radiu || 20,
            semiMajorAxis: radiu || 20,
            // material: img,
            material: Cesium.Color.RED.withAlpha(0.4),
            distanceDisplayCondition: ellipseCondition,
          },
        });
      });
    },
    drawAssetsTip(text, index) {
      if (typeof this.assetsTipImage[index] === "undefined") {
        return false;
      }
      var canvas = document.createElement("canvas");
      canvas.width = 40;
      canvas.height = 40;
      var context = canvas.getContext("2d");
      // 绘制背景
      context.drawImage(this.assetsTipImage[index], 2, 2, 40, 40);
      // 绘制第一行数字
      var dom = text;
      context.font = "10px bold 宋体";
      context.fillStyle = "#ffef00";
      if (index == 5) {
        context.fillText(dom, 16, 22);
      } else {
        context.fillText(dom, 10, 22);
      }

      return canvas;
    },
    // 滚动加载
    lazyLoading(e) {
      if (this.fetchListFlag) return;
      const scrollTop = e.target.scrollTop; // 滚动条滚动时，距离顶部的距离
      const windowHeight = e.target.clientHeight; // 可视区的高度
      const scrollHeight = e.target.scrollHeight; // 滚动条的总高度

      // 滚动条到底部
      if (scrollTop + windowHeight > scrollHeight - 10) {
        this.page++;
        if (this.page > this.total_pages) return;
        this.getLists2();
      }
    },
    // 格式化时间 返回年月日
    getDate(time) {
      if (time) {
        const val = new Date(time);
        const Y = val.getFullYear();
        const M = val.getMonth() + 1;
        const D = val.getDate();
        return Y + "-" + M + "-" + D;
      }
      return "";
    },

    /**
     * 事件上报 ----------------------------------------
     */
    showList() {
      this.indexFlag = 0;
    },
    selectImg(index, item) {
      var _this = this;
      if (this.selectImgIndex === index) {
        this.showIssueViewer = false;
        this.selectImgIndex = -1;
      } else {
        this.selectImgIndex = index;
        if (item == undefined) {
          _this.selectItemPoints = [_this.selectItem.photos[index].points];
        } else {
          if (_this.selectItem.photos[index].points[1]) {
            _this.selectItemPoints = [_this.selectItem.photos[index].points];
          }
        }
        if (this.selectItem && this.selectItem.photos) {
          this.markPicObj.photo_id =
            this.selectItem.photos[index].photo_id + "";
          this.selectItemMarkId = this.selectItem.photos[index].photo_id + "";
        }

        this.showIssueViewer = true;
      }
    },
    reportCancel() {
      this.indexFlag = 0;
      this.restIssueDetail();
    },
    restIssueDetail() {
      // todo 重置详情信息
    },

    handleFinishEvent() {
      if (!this.showFinishForm) {
        this.showFinishForm = true;
        this.showUploadForm = false;
        this.showIgnoreForm = false;
      } else {
        this.commitFinish();
      }
    },
    async commitFinish() {
      if (this.uploadContent) {
        const imgList = this.fileList.map((item) => {
          return {
            img_name: item.name,
            img_url: item.url,
          };
        });

        const params = {
          issue_id: this.selectItem.issue_id,
          info: this.uploadContent,
          push_type: 1, // ?
          user_id: this.userId,
          img_list: imgList,
        };
        const res = await completeEvent(params);
        this.showUploadForm = false;
        this.showFinishForm = false;
        this.showIgnoreForm = false;
        if (res && res.error_code === 0) {
          this.selectItem.state = "已办结";
          this.$message.success("办结成功！");
          const finishFlow = {
            content: this.uploadContent,
            create_by: this.$store.getters?.userName || "",
            create_time: getTimeString(),
            img_list: imgList,
            info: "办结",
            topic: "办结",
          };
          this.selectItemFlow.push(finishFlow);
          this.updateIssueState(15);
        } else {
          this.$message.warning(
            "问题【" + that.selectItem.title + "】上报失败"
          );
        }
      } else {
        this.$message.warning("请输入办结内容");
      }
    },
    getFullImgUrl() {
      return this.selectItem.photoOssUrl;
    },
    // ---------------------------------
    closeIssueMenu() {
      this.showIssueMenu = false;
    },
    switchDemoFlag() {
      this.demo_flag = (this.demo_flag + 1) % 2;
      this.fetchData(1);
    },
    showTypeMenu() {
      this.showIssueMenu = !this.showIssueMenu;
      // request
    },
    changeOrderType() {
      this.order_flag = !this.order_flag;
      this.fetchData();
    },
    setItemAsDemo() {
      const userinfo = store.getters.userInfo;
      if (!userinfo) {
        this.$message.warning("获取用户信息失败！");
        return;
      }
      const params = {
        problem_code: this.selectItem.issue_id,
        user_id: userinfo.id,
        case: (this.selectItem.if_case + 1) % 2,
      };
      setCase(params)
        .then((res) => {
          if (res.msg === "ok") {
            this.selectItem.if_case = (this.selectItem.if_case + 1) % 2;
            this.list.forEach((issue) => {
              if (issue.issue_id === this.selectItem.issue_id) {
                issue.if_case = this.selectItem.if_case;
              }
            });
            this.list = this.list.filter(
              (issue) => !(this.demo_flag === 1 && issue.if_case === 0)
            );
            //
            this.updateIssueLog(this.selectItem.issue_id);
          } else {
            this.$message.warning("设置失败，请稍后重试");
          }
        })
        .catch(() => {
          this.$message.warning("设置失败，请稍后重试");
        })
        .finally(() => this.$forceUpdate());
    },
    ignoreIssue(issue) {
      if (!this.showIgnoreForm) {
        this.showIgnoreForm = true;
        this.showUploadForm = false;
        this.showFinishForm = false;
        return false;
      }
      const userinfo = store.getters.userInfo;
      if (!userinfo) {
        this.$message.warning("获取用户信息失败！");
        return;
      }

      if (!this.ignoreContent) {
        this.$message.warning("请输入忽略理由");
        return;
      }
      if (!this.ignoreType) {
        this.$message.warning("请输入忽略类型");
        return;
      }
      const params = {
        problem_code: this.selectItem.issue_id,
        user_id: userinfo.id,
        info: this.ignoreContent,
        // type: this.ignoreType
      };
      setIgnore(params)
        .then((res) => {
          if (res.msg === "ok") {
            this.$message.success("事件状态更新成功！");
            this.showIgnoreForm = false;
            this.showUploadForm = false;
            this.updateIssueState(99);
          } else {
            this.$message.warning("设置失败，请稍后重试！");
          }
        })
        .catch(() => {
          this.$message.warning("设置失败，请稍后重试！");
        })
        .finally(() => this.$forceUpdate());
    },
    getScenesType() {
      getSceneType({
        begin_time: this.dateValue2[0],
        end_time: this.dateValue2[1],
        depart_id: this.deptId,
        user_id: this.userId,
      })
        .then((res) => {
          if (res.msg === "ok") {
            //
            this.scenesTypeList = res.data.scene_type;
            this.updateRadioMenu();
            //
            const statusList = [{ key: "", value: "全部" }];
            Object.keys(res.data.status).forEach((key) => {
              statusList.push({
                key: key,
                value: res.data.status[key],
              });
            });
            this.radio = "全部";
            this.issueStatusList = statusList;
            this.$store.commit("room/set_map_loading", true);
            this.scene_tags.sort((a, b) => {
              return b.scene_num - a.scene_num;
            });
            this.getLists2();
            this.getIssuePosition();
          } else {
            this.$message.warning("加载失败：" + res.msg);
            this.$bus.emit("CloseLoading", "");
          }
        })
        .catch(() => {
          this.$bus.emit("CloseLoading", "");
          this.$message.error("访问失败，请稍后重试！");
        });
    },
    updateRadioMenu(menuList, isClear = true) {
      this.alwaysShowEllipse = !isClear;
      const temp = [];
      if (!menuList) {
        this.scenesTypeList.forEach((item) => {
          item.scene.forEach((subItem) => {
            subItem.scene = subItem.scene_name;
            if (subItem.is_select === 1) {
              temp.push(subItem);
            }
          });
        });
      } else {
        menuList.forEach((item) => {
          item.scene = item.scene_name;
          temp.push(item);
        });
      }
      this.scene_tags = temp;
      // this.
      this.radio = "全部";
      if (menuList) {
        this.fetchData();
      }
    },
    updateIssueNum() {
      getSceneType({
        begin_time: this.dateValue2[0].toString(),
        end_time: this.dateValue2[1].toString(),
        depart_id: this.deptId,
        user_id: this.userId,
      }).then((res) => {
        this.scenesTypeList.forEach((typeItem) => {
          const newTypeItem = res.data.scene_type.find(
            (item) => item.scene_type_id === typeItem.scene_type_id
          );
          typeItem?.scene?.forEach((scene) => {
            const newScene = newTypeItem?.scene?.find(
              (item) => scene.scene_id === item.scene_id
            );
            if (newScene) {
              scene.scene_num = newScene.scene_num;
            }
          });
        });
        this.scene_tags.forEach((scene) => {
          res.data.scene_type.forEach((item) => {
            item.scene.forEach((subItem) => {
              if (subItem.scene_id === scene.scene_id) {
                scene.scene_num = subItem.scene_num;
              }
            });
          });
        });
        this.scene_tags.sort((a, b) => {
          return b.scene_num - a.scene_num;
        });
        this.getLists2();
        this.getIssuePosition();
      });
    },
    getLists2() {
      this.fetchListFlag = true;
      const array = [];
      this.scene_tags.forEach((item) => {
        array.push(item.scene_id);
      });
      const params = {
        scene_id: this.radio === "全部" ? array : [this.radio],
        page: this.page,
        page_size: this.page_size,
        begin_date: this.dateValue2[0],
        end_date: this.dateValue2[1],
        sort_type: this.order_flag ? "time" : "default",
        issue_status: this.state_value,
        if_case: this.demo_flag || 0,
        depart_id: this.deptId,
        user_id: this.userId,
      };
      getIssueList(params)
        .then((res) => {
          res.data.items.forEach((item) => {
            const filterRes = this.issueStatusList.filter(
              (typeItem) => typeItem.key === item.state + ""
            )[0];
            item.stateName = filterRes.value;
            item.scene = item.scene_id;
            item.issue_code = item.issue_id;
            // 缩略图兼容旧数据
            if (item.photo_crop_url.includes("?imageMogr2")) {
              const strArray = item.photo_crop_url.split("?imageMogr2");
              const str2 = strArray[1].replace(/\$/g, "");
              item.photo_crop_url = strArray[0] + "?imageMogr2" + str2;
            }
          });
          // 添加到列表
          if (res.data) {
            if (this.page === 1) {
              this.list = res.data.items;
              this.total_pages = res.data.total_pages;
              if (
                this.$refs.issueList &&
                this.$refs.issueList.children &&
                this.$refs.issueList.children[0]
              ) {
                this.$refs.issueList.children[0].scrollIntoView(true);
              }
            } else {
              this.list = this.list.concat(res.data.items);
            }
          } else {
            if (this.page === 1) {
              this.list = [];
              this.total_pages = 0;
            }
          }
        })
        .finally(() => {
          this.fetchListFlag = false;
          this.$bus.emit("CloseLoading", "");
          this.fetchDataFlag = false;
        });
    },
    initMenuData() {
      requestIgnoreOptions().then((res) => {
        if (res.msg === "ok") {
          this.ignoreTypeList = res.data;
          console.log("requestIgnoreOptions", res);
        }
      });
    },
    updateIssueState(state) {
      // 99 :已忽略
      // 10 :已分流
      const typeId = state.toString();
      const typeName = this.issueStatusList.filter(
        (type) => type.key === typeId
      )[0].value;
      this.selectItem.issue_status = typeId;
      this.selectItem.state = typeName;
      this.list.forEach((issue) => {
        if (issue.issue_id === this.selectItem.issue_id) {
          issue.state = state;
          issue.stateName = typeName;
        }
      });
    },
    updateIssueLog(code) {
      this.requestIssueFlowById(code);
    },
    getTagTitle(item) {
      return item.scene + "(" + item.scene_num + ")";
    },
    /**
     *  事件办结：上传图片
     */
    handleSuccess(response) {
      if (response && response.data && response.data.name) {
        this.fileList.push({
          name: response.data.name,
          url: response.data.photo_file_url,
        });
      }
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter((item) => item.name !== file.name);
    },
    viewImage(item) {
      this.$refs.moveBox_flowImg.toggleShow(true);
      this.$refs.imgBox.SetImage(item.img_url);
    },
    closePhoto() {
      this.selectItemImg = "";
      this.selectItemPoints = "";
      this.selectItemMarkId = "";
      this.showIssueViewer = false;
      this.selectImgIndex = -1;
    },
  },
};
</script>
<style lang="scss">
.more_list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background-color: rgba(239, 234, 234, 0.9);

  .el-radio {
    width: 130px;
    font-size: 13px;
    color: #333333;
    margin-right: 0px;
    overflow: hidden; /* 超出一行文字自动隐藏 */
    text-overflow: ellipsis; /*文字隐藏后添加省略号*/
    white-space: nowrap; /*强制不换行*/
    .el-radio__inner {
      border: 1px solid #969797;
    }
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/style/style.scss";

.flex_column {
  display: flex;
  flex-direction: column;
}

.view_wrap {
  padding: 10px;
  color: white;
  height: 100%;
  text-align: center;
  overflow-y: hidden;

  .scene_tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: scroll;
    max-height: 85px;

    ::v-deep .el-radio {
      margin-right: 0;
      font-size: 12px;
      width: 33%;
      padding-right: 2px;
      display: flex;
      overflow: hidden;
      color: #b5b5b5;

      .el-radio__input {
        -webkit-transform-origin-x: 0; /*缩小后文字居左*/
        -webkit-transform: scale(0.8); /*关键*/
        transform: scale(0.8);
      }

      .el-radio__label {
        font-size: 12px;
        padding-left: 1px;
        -webkit-transform-origin-x: 0; /*缩小后文字居左*/
        -webkit-transform: scale(0.9); /*关键*/
        transform: scale(0.9);
      }
    }

    .alltag {
      width: 100%;
      margin: 3px auto;
      display: flex;

      .more {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      ::v-deep .el-radio {
        width: auto;

        .el-radio__label {
          font-size: 16px;
        }
      }
    }
  }

  .dateValueDay::v-deep {
    .mydatepicker {
      width: 100%;
      height: 30px;
      line-height: 30px;

      .el-input__icon {
        line-height: 30px;
      }

      .el-range-input {
        font-size: 12px;
      }

      .el-range-separator {
        line-height: 28px;
      }
    }
  }

  .box_header {
    background-image: url("~@/assets/box_title_back1.png");
    background-size: 100% 100%;
    text-align: left;
    width: 100%;
    height: 26px;
    margin: 4px auto;
    line-height: 26px;
    font-size: 14px;
    color: white;
    padding: 0 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    ::v-deep .el-input__inner {
      background-color: rgba(183, 178, 178, 0.2);
      color: white;
      width: 80px;
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      padding-right: 6px;
    }

    ::v-deep .el-input__icon {
      height: auto;
      line-height: 1;
    }

    ::v-deep .el-input__suffix {
      right: 2px;
    }

    ::v-deep .el-input__count {
      color: darkgrey;
    }

    .container_title_list {
      color: #fff;
      cursor: pointer;
      font-size: 15px;
    }

    .container_title_detail {
      color: #fff;
      cursor: pointer;
      font-size: 15px;
    }

    .list_title_demo {
      cursor: pointer;
    }

    .list_title_unselect {
      color: rgba(227, 227, 227, 0.8);
      cursor: pointer;
      font-size: 15px;
    }

    .box_header_back_icon {
      cursor: pointer;
    }
  }

  .list {
    //height: vh(770);
    flex: 1;
    overflow-y: auto;

    .selected-card {
      border: 2px solid #18abf3 !important;
    }

    .card {
      width: 100%;
      height: 87px;
      display: flex;
      font-size: 13px;
      margin-top: 5px;
      background-color: rgba(243, 243, 243, 0.1);
      border: 2px solid transparent;
      transition: all 0.2s linear;

      &:hover {
        border: 2px solid #d1f72c;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.2s linear;
      }

      .imgbox {
        width: 100px;
        position: relative;

        .c_img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }

        .bottom_tool {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 20px;
          line-height: 20px;
          cursor: pointer;
          color: white;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          justify-content: space-around;
        }
      }

      .content {
        width: calc(100% - 100px);
        padding: 5px 10px;

        .c_header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #00aaff;

          .c_name {
            color: #00aaff;
            line-height: 18px;
            height: 18px;
            margin-left: 2px;
          }

          .c_state {
            width: 50px;
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            margin-bottom: 2px;
            background-color: #b5b5b5;
            border-radius: 5px;
            color: #ffffff;

            &.red {
              background-color: #ff4b5d;
            }

            &.green {
              background-color: #70b603;
            }

            &.blue {
              background-color: #00aaff;
            }

            &.orange {
              background-color: #ffaa00;
            }

            &.gray {
              background-color: #b5b5b5;
            }
          }
        }

        .c_body {
          font-size: 12px;
          text-align: left;

          p {
            margin: 5px auto;
            overflow: hidden; /* 超出一行文字自动隐藏 */
            text-overflow: ellipsis; /*文字隐藏后添加省略号*/
            white-space: nowrap; /*强制不换行*/
          }
        }
      }
    }
  }

  .issue_detail {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    caret-color: transparent;

    .issue_img_list {
      height: vh(160);
      display: flex;
      flex-direction: row;
      overflow-y: auto;

      .image_item_wrap {
        position: relative;
        margin: 8px 5px;

        .image_item_check_btn {
          position: absolute;
          top: 5px;
          left: 5px;
          width: 24px;
          height: 24px;
        }

        .image {
          width: vh(160);
          height: vh(120);
        }

        .cover {
          position: absolute;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.3);
          width: vh(160);
          height: vh(120);
          pointer-events: none;
        }

        .img_selected {
          box-shadow: 0 0 0 2px yellow;
        }
      }
    }

    .issue_data {
      //flex: 4;
      //height: 0;
      background-color: hsla(0, 0%, 100%, 0.1);
      padding: 10px 20px 15px 10px;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;

      .issue_title {
        justify-content: space-between;
        width: 100%;
        color: #1cc1ff;

        .issue_title_btn {
          background-color: #1cc1ff;
          border-radius: 10px;
          padding: 4px 8px 1px 8px;
          color: white;
        }

        .issue_name {
          color: #00aaff;
        }

        .issue_state {
          line-height: 16px;
          font-size: 12px;
          background-color: #b5b5b5;
          padding: 2px 10px 2px 10px;
          border-radius: 10px;
          color: #ffffff;

          &.red {
            background-color: #ff4b5d;
          }

          &.green {
            background-color: #70b603;
          }

          &.blue {
            background-color: #00aaff;
          }

          &.orange {
            background-color: #ffaa00;
          }

          &.gray {
            background-color: #b5b5b5;
          }
        }
      }

      .item_detail_wrap {
        display: grid;
        grid-template-columns: auto 1fr;

        p {
          margin: 8px 0 0 0;
          text-align: justify;
          text-justify: distribute-all-lines;
          width: 100%;
          min-width: 65px;
          color: rgba(240, 240, 240, 0.9);
        }
      }
    }

    .issue_flow {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: 20px;
      overflow: auto;
      padding-bottom: 10px;

      .item_flow {
        display: grid;
        width: 280px;
        grid-template-rows: auto auto auto;
        grid-template-columns: auto 1fr auto;
        border-bottom: rgba(150, 150, 150, 0.6) 1px solid;
        border-left: whitesmoke 1.5px solid;
        padding: 10px 5px 15px 0;
        row-gap: 10px;

        .item_flow_type {
          grid-row-start: 1;
          grid-row-end: 3;
          line-height: 15px;
          height: 15px;

          .type_style {
            font-size: 13px;
            color: black;
            margin-left: -20px;
            padding: 1px 5px;
            background-color: white;
            border-radius: 8px;
          }
        }

        .item_flow_people {
          height: 15px;
          text-align: start;
          padding-left: 15px;
          font-size: 13px;
          padding-top: 2px;
          //font-weight: bold;
        }

        .item_flow_time {
          height: 15px;
          padding-top: 5px;
          line-height: 10px;
          font-size: 12px;
          color: white;
          //font-weight: bold;
        }

        .item_flow_content {
          grid-column-start: 2;
          grid-column-end: 4;
          padding-left: 15px;
          font-size: 13px;
          color: darkgrey;
          text-align: start;
        }

        .item_flow_imgs {
          grid-column-start: 1;
          grid-column-end: 4;
          display: flex;
          flex-direction: row;
          overflow-x: auto;
          padding-right: 10px;
          margin-left: 10px;

          .item_flow_img {
            width: 80px;
            height: 60px;
            margin-left: 10px;
            border: dodgerblue 1px solid;
            flex-shrink: 0;
          }
        }

        ::-webkit-scrollbar {
          display: block !important;
          height: 6px !important;
        }

        ::-webkit-scrollbar-track {
          border-radius: 10px !important;
          background-color: rgba(0, 0, 0, 0.2);
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
          border-radius: 10px !important;
          -webkit-box-shadow: inset 0 0 6px rgba(28, 193, 255, 0.5);
          //color: #1cc1ff;
          background-color: rgba(28, 193, 255, 0.5);
        }
      }
    }

    ::v-deep .el-textarea {
      height: 100%;

      .el-textarea__inner {
        caret-color: black;
        height: 100%;
        font-size: 14px;
        resize: none;
        border: rgba(150, 150, 150, 0.6) 1px solid;
        border-radius: 4px;
        //background: linear-gradient(to right, rgba(240, 240, 240, 0.1) 20%);
        background: linear-gradient(
          to right,
          rgba(240, 240, 240, 0.2),
          rgba(240, 240, 240, 0.1) 3%,
          rgba(240, 240, 240, 0.1) 97%,
          rgba(240, 240, 240, 0.2)
        );
        //color: rgba(240, 240, 240, 0.9);
        color: black;
        //box-shadow:  inset  -3px -3px rgba(255,0,0,0.9),;
      }

      .el-input__count {
        font-size: 8px;
        background: rgba(240, 240, 240, 0.1);
        color: rgba(240, 240, 240, 0.9);
      }
    }

    .issue_title_input {
      background-color: rgba(255, 255, 255, 0.23);
      margin-top: 10px;
    }

    .issue_detail_input {
      margin-top: 10px;
      min-height: 120px;
      background-color: rgba(255, 255, 255, 0.23);
      cursor: auto !important;
    }

    .issue_report_detail {
      display: grid;
      grid-template-columns: auto 1fr;
      margin-top: 20px;
      padding-bottom: 10px;
      row-gap: 10px;
      border-bottom: grey 1px solid;

      .title {
        text-align: justify;
        font-size: 13px;
        color: #b5b5b5;
        text-align-last: justify;
      }

      .content {
        font-size: 13px;
        color: #b5b5b5;
        text-align: start;
        padding: 0;
      }
    }

    .issue_process_wrap {
      flex: 5;
      height: 0;
      overflow-y: auto;

      .issue_process2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        margin-top: 20px;
        padding-bottom: 10px;
        row-gap: 10px;
        font-size: 13px;
        color: #b5b5b5;
        text-align: start;
      }
    }

    .issue_process {
      flex: 5;
      height: 0;

      padding: 10px 20px 15px 10px;
      margin: 10px 0;
      color: white;
      overflow-y: auto;

      ::v-deep .el-timeline {
        padding-left: 20px;
      }

      ::v-deep .el-timeline-item__content {
        color: white;
      }

      ::v-deep .el-timeline-item__timestamp {
        color: #75d9ff;
      }

      ::v-deep .el-card {
        background-color: rgba(255, 255, 255, 0.1);
        color: white;
      }

      ::v-deep .el-card__body {
        padding: 0 10px;
      }

      p {
        margin: 5px 0;
      }
    }

    .issue_type_wrap {
      //flex: 4;
      height: vh(80);
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 10px;

      span {
        margin-left: 5px;
        margin-right: 5px;
        font-size: 14px;
        text-align: center;
      }
    }

    .button_group_wrap {
      margin-bottom: 6px;
      max-height: 45px;
      color: white;

      .btn {
        height: 45px;
        border-radius: 0;
        border: none;
        text-align: center;
        width: 0;
        margin: 0;
        color: white;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .cancel_text {
        background-color: grey;
        flex: 1;
      }

      .ignore_text {
        background-color: orange;
        text-align: center;
        flex: 3;
        padding: 0;
        margin: 0;
      }

      .upload_text {
        flex: 3;
        background-color: #1cc1ff;
        padding: 0;
        margin: 0;
      }
    }

    .ignore_info_wrap {
      position: absolute;
      left: 10px;
      bottom: 61px;
      padding: 10px;
      background-color: white;
      width: calc(100% - 20.5px);
      border-radius: 10px 10px 0 0;

      .ignore_issue_name {
        flex: 1;
        color: darkgrey;
        text-align: start;
      }

      .ignore_content {
        margin: 10px;
        width: calc(100% - 20px);
        min-height: 100px;
      }
    }

    .update_info_wrap {
      position: absolute;
      left: 10px;
      bottom: 61px;
      padding: 10px;
      background-color: white;
      width: calc(100% - 20.5px);
      border-radius: 10px 10px 0 0;

      .update_issue_name {
        color: black;
        border: rgba(150, 150, 150, 0.6) 1px solid;
        padding: 5px 10px;
        text-align: start;
        border-radius: 4px;
      }

      .update_content {
        color: darkgrey;
        margin: 10px;
        width: calc(100% - 20px);
      }
    }
  }

  .flex_row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

.report_dialog {
  .radio {
    color: white;
    font-size: 28px;
    text-align: start;
    margin-left: 100px;
  }

  ::v-deep .el-dialog {
    width: 600px;
    background: rgba(5, 29, 40, 0.7);
    border: 1px solid grey;
    border-radius: 16px;

    .el-dialog__header .el-dialog__title {
      color: white;
    }

    .el-dialog__body {
      margin: 0;
      padding: 0;
    }

    ::v-deep .el-dialog__title {
      color: white;
    }
  }
}

.issueInfotips {
  position: fixed;
  width: 300px;
  height: 130px;
  background: rgba(255, 255, 255, 0.75);
  color: #333333;
  border-radius: 10px;
  padding: 10px 10px;
  text-align: initial;
  font-size: 14px;

  .issueInfotipsBox {
    position: relative;
    height: 100%;

    .issue_title {
      font-size: 16px;
      line-height: 30px;
    }

    .issue_time {
      line-height: 35px;
    }

    .arrowpoint {
      position: absolute;
      bottom: -35px;
      right: 100px;
      border-left: 20px solid transparent;
      border-bottom: 0px solid transparent;
      border-top: 25px solid rgba(255, 255, 255, 0.75);
      border-right: 30px solid transparent;
    }

    .closeissueInfotipsBox {
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 18px;
      cursor: pointer;

      i {
        font-weight: bold;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.2);
}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(28, 193, 255, 0.5);
  //color: #1cc1ff;
  background-color: rgba(28, 193, 255, 0.5);
}

.full-mask {
  position: fixed;
  z-index: 20020;
  background-color: rgba(0, 0, 0, 0);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  box-sizing: inherit;
}

.issue_type_card {
  position: absolute;
  right: 340px;
  top: 0;
  z-index: 9999;
}

.demo_switch {
  margin-left: 5px;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  border: lightgrey 1px solid;
  padding: 1px;
  cursor: pointer;
}

.order_class {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: white;
  padding: 0 5px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  background-color: rgba(183, 178, 178, 0.2);
  box-sizing: border-box;
  outline: 0;
  margin-right: 6px;

  .span {
    pointer-events: none;
  }

  .order_icon {
    height: 18px;
    width: 18px;
  }
}

.demo_switch_selected {
  margin-left: 3px;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.upload-photo {
  text-align: start !important;
  display: flex;
  flex-direction: row;

  .upload-btn {
    margin-top: 10px;
    color: #0f1122;
    padding: 8px;
    background-color: lightgrey;
    border: none;
    //box-shadow: 1px 1px 0 2px grey;
  }
}

::v-deep .el-upload-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;

  .el-upload-list__item {
    color: blue;
    width: auto;
  }

  .el-upload-list__item-name {
    font-size: 12px;
    color: #0a95ff;
  }

  .el-icon-document {
    display: none;
  }

  .el-upload-list__item:first-child {
    margin-top: 5px;
  }
}
</style>
